import { ElMessage } from "element-plus";
import router from "./router";
import { useUserStore } from "./stores/user";
// 权限控制
import { getProfileAPI } from "./apis/system";
import type {  RouteRecordRaw } from "vue-router";
import { asyncRoutes } from "./router/asyncRoute";

import NProgress from 'nprogress'
import { useMenuStore } from "./stores/menu";



// 设置页面白名单

const WHITE_LIST = ['/login','/404']

// 根据权限标识过滤路由表
const getRoutes = (firstRoutePerms:string[],secondRoutePerms:string[],asyncRoutes:RouteRecordRaw[])=>{
    // 根据一级和二级标题对动态路由表做过滤 return出去过滤之后的路由表
    // 1.根据一级路由表对动态路由做过滤
    if(firstRoutePerms.includes('*')){
        // 管理员 拷贝 防止重复 登录同一个用户时，此变量返回值给外面后不断 push * 地址。导致左侧菜单key重复报错问题
        return [...asyncRoutes];
    }
    const firstRoutes = asyncRoutes.filter((route:RouteRecordRaw) =>{
        return firstRoutePerms.includes(route.meta!.permission!)
    })
    console.log(firstRoutes)

    // 2.对二级路由做过滤
    const lastRoutes = firstRoutes.map((route:RouteRecordRaw) =>{
        return {
            ...route,
            children:route!.children!.filter(v => secondRoutePerms.includes(v.meta!.permission!))
        }
    })
    return lastRoutes
}
// 处理一级路由数据
const getFirstRoutePerms = (permsArr:string[]) =>{
    const newArr = permsArr.map(item =>{
        return item.split(':')[0]
    })
    return [... new Set(newArr)]
}

// 处理二级路由权限数据
const getSecondRoutePerms = (permsArr:string[]) =>{
    const newArr = permsArr.map(item =>{
        const arr = item.split(':')
        return `${arr[0]}:${arr[1]}}`
    })
    return [... new Set(newArr)]
}
// 路由导航守卫

router.beforeEach( async (to,from,next)=>{
    // 开启进度条
    NProgress.start()
    // 获取token
    const store = useUserStore()
    // 判断是否有token
    if(store.token){
    //   判断要去的页面是否是登录页，如果是则拦截到首页
        // 获取 用户权限数据
            const store = useUserStore()
             // 如果没有用户信息，发送请求获取，并保存到store中
         if(!store.profile.id){
            const res = await getProfileAPI()
            store.setProfile(res.data)
            console.log('查询当前登录人用户、角色和权限信息:',res)
            // 处理一级路由
            const menus = getFirstRoutePerms(res.data.permissions)
            console.log('firstRoutePerms:',menus)
            // 处理二级路由
            const smenus = getSecondRoutePerms(res.data.permissions)
            console.log('getsecondRoutePerms:',smenus)

            // 获取匹配的路由
            const perRoutes = getRoutes(menus,smenus,asyncRoutes)
            console.log(perRoutes)

            // 4.把动态路由表加入到路由系统中，当前浏览器中访问路由的路径，显示渲染出来对应的组件
            perRoutes.forEach(route =>{
                router.addRoute(route)
            })

            // 保存侧边栏到菜单路由
            const menuStore = useMenuStore()
            menuStore.setMenuList(perRoutes as RouteRecordRaw[])
            next({...to})
        } else{
        // 有token放行
        next()
        }   
        
    }else{  
        // 没有token
        if(WHITE_LIST.includes(to.path)){
            // 在白名单内，放行
         next()
        }else{
            // 不在白名单内 跳转到登录页
            next('/login')
            ElMessage.warning('登录信息无效，请先登录')
        }
    
    }
})

